<template>
  <div class="main-content-wrapper d-flex flex-column">
    <!--头部-->
    <Top/>
    <div class="content-page-box-area">
      <div class="all-messages-body">
        <div class="all-messages-header d-flex justify-content-between align-items-center">
          <h3>消息</h3>
        </div>
        <div class="messages-profile-box">
          <a href="#"><img src="http://cd.ray-live.cn/imgs/headpic/pic_10.jpg"
                           class="rounded-circle" alt="image"></a>
          <h3><a href="#">房间信息</a></h3>
        </div>
        <div class="messages-chat-container">
          <div class="chat-content" v-html="chatContent"></div>
          <div class="chat-list-footer">
            <form class="d-flex align-items-center">
              <div class="btn-box d-flex align-items-center me-3">
                <button class="file-attachment-btn d-inline-block me-2" data-bs-toggle="tooltip" data-bs-placement="top" title="File Attachment" type="button"><i class="ri-attachment-2"></i></button>
                <button class="emoji-btn d-inline-block" data-bs-toggle="tooltip" data-bs-placement="top" title="Emoji" type="button"><i class="ri-user-smile-line"></i></button>
              </div>
              <input type="text" class="form-control" placeholder="输入消息内容" v-model="inputmsg">
              <button type="button" class="send-btn d-inline-block" @click="sendMessage">发送消息</button>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>
  <!--  底部-->
  <Footer/>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import Top from "@/components/Top.vue";
import Footer from "@/components/Footer.vue";
import axios from '@/plugins/axios.js'
import socket from '@/plugins/socket.js'
import router from "@/router/index.js";
import {useRoute} from "vue-router";
const route = useRoute();
let inputmsg = ref("")
let roomId = reactive(route.query.id)
//查询 用户信息
import loginUser from '@/stores/LoginUser.js'
let chatContent = socket.getContent();

let sendMessage =()=>{
  let param = {
    "roomId":roomId,
    "uid":loginUser().userModel.uid,
    "message":inputmsg.value
  }
  axios.post("chat/send/room/message",param).then(result=>{
    inputmsg.value = "";
  })
}
onMounted(() => {
  socket.connect("room/"+roomId+"/"+loginUser().userModel.uid)
});
</script>

<style scoped>

</style>